<template>
	<view class="login-wrapper">
		<view class="login-top"></view>
		<view class="login-content">
			<view class="hint color-red" v-if="isBind">请输入您的手机号码，绑定至微信</view>
			<view class="hint" v-else>请输入您的手机号码，登录或注册您的XX账号</view>
			
			<view class="input-box">
				<view class="input-item">
					<view class="tag-name">+86</view>
					<u--input
						placeholder="请输入您的手机号"
						v-model="mobile"
						type="number"
						border="none"
						maxlength="11"
					></u--input>
					<view class="code-box">
						<text class="code-btn" @click="getCode">{{ btnText }}</text>
					</view>	
				</view>
				<view class="input-item">
					<view class="tag-name">验证码</view>
					<u--input
						placeholder="请输入短信验证码"
						v-model="smsCode"
						border="none"
					></u--input>
				</view>
			</view>
			
			<u-button 
				shape="circle" 
				color="#195ED7" 
				class="btn" 
				@click="loginFn"
			>开始</u-button>
			
			<view class="wx-box" v-if="!isBind">
				<view class="logo" @click="wxLogin">
					<image src="../../static/wx.png" mode="aspectFit"></image>
				</view>
				<view @click="wxLogin">微信登录</view>
			</view>
		</view>
		
		<view class="position-content">
			<u-modal 
				title="提示"
				:show="showHint" 
				:content='`该手机号已绑定微信账号（${wxAccount}），是否解绑并与当前账号绑定？`'
				showCancelButton
				@confirm="confirmFn"
				@cancel="cancelFn"
			></u-modal>
		</view>
	</view>
</template>

<script>
	import { loginMobile, wxLogin, checkWxMobile, checkMobile, appMobileLogin, sendRegisterVerifyCode } from '@/api/index.js'
	
	export default {
		data() {
			return {
				mobile: '',
				smsCode: '',
				btnText: '获取验证码',
				times: 60,
				canGet: true,
				isBind: false,
				showHint: false,
				wxAccount: '',
				wxInfo: {
					headimgurl: '',
					openid: '',
					nickname: ''
				}
			}
		},
		onShow() {
			const code = this.getURLParameter('code')
			if(code) {
				this.wxLogin()
			}
		},
		methods: {
			wxLogin() {
				const appid = 'wx17393e980e6fc7f0'
				const redirectUri = encodeURIComponent('http://gpu.sslvip.net/h5/')
				// const code = '0037UbHa1zf3zG0ozxGa1P4U6G07UbHU'
				const code = this.getURLParameter('code')
				const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
				
				if(code) {
					/**
					 * 校验微信号有没有绑定手机
					 * 有则直接登录
					 * 没有则输入手机号绑定
					 * 校验输入的手机号是否已绑定其它微信号
					 * 给出提示
					 * 登录
					 */
					wxLogin({
						code
					}).then(res => {
						const { token, member, headimgurl, openid, nickname } = res.data
						this.wxInfo = {
							headimgurl,
							openid,
							nickname
						}
						
						if(token) {
							this.isBind = false
							uni.setStorageSync('token', token)
							uni.setStorageSync('userInfo', member)
							uni.switchTab({
								url: '/pages/workbench/index'
							})
						}else{
							this.isBind = true
						}
					})
				}else{
					window.location.href = authUrl
				}
			},
			bindLogin(isReplace) {
				const { headimgurl, openid, nickname } = this.wxInfo
				appMobileLogin({
					mobile: this.mobile,
					smsCode: this.smsCode,
					isReplace, // 1更换 2不更换
					headimgurl,
					openid,
					nickname
				}).then(res => {
					this.showHint = false
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('userInfo', res.data.member)
					uni.switchTab({
						url: '/pages/workbench/index'
					})
				})
			},
			confirmFn() {
				this.bindLogin(1)
			},
			cancelFn() {
				this.bindLogin(0)
			},
			loginFn() {
				if(!this.mobile) {
					this.$u.toast('请输入手机号');
					return
				}
				
				if(!this.smsCode) {
					this.$u.toast('请输入验证码');
					return
				}
				
				if(this.isBind) {
					checkWxMobile({
						mobile: this.mobile,
						nickname: this.wxInfo.nickname
					}).then(res => {
						// 有值则表示手机号已绑定微信，给出弹窗提示
						if(res.data) {
							this.showHint = true
							this.wxAccount = res.data
						}else{
							this.bindLogin(1)
						}
					})
				}else{
					appMobileLogin({
						mobile: this.mobile,
						smsCode: this.smsCode
					}).then(res => {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('userInfo', res.data.member)
						uni.switchTab({
							url: '/pages/workbench/index'
						})
					})
				}
			},
			getCode() {
				if(!this.mobile) {
					this.$u.toast('请输入手机号码');
					return
				}
							
				sendRegisterVerifyCode({
					mobile: this.mobile
				}).then(res => {
					this.countDownFn();
					this.$u.toast('已发送，请注意查收');
				})
			},
			// 倒计时
			countDownFn() {
			  let t = setInterval(() => {
				if (this.times <= 1) {
				  clearInterval(t);
				  this.btnText = '重新获取';
				  this.times = 60;
				  this.canGet = true;
				} else {
				  this.times--;
				  this.btnText = this.times + 's';
				}
			  }, 1000);
			},
			// 获取链接参数
			getURLParameter(name) {
			  const params = new URLSearchParams(window.location.search);
			  return params.get(name);
			}
		}
	}
</script>

<style lang="scss">
.login-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	
	.login-top {
		flex-shrink: 0;
		width: 100%;
		height: 360rpx;
		background: url('../../static/banner.png') center no-repeat;
		background-size: cover;
	}
	
	.login-content {
		flex: 1;
		height: 0;
		padding: 40rpx 60rpx;
		background-color: #fff;
		
		.hint {
			margin-bottom: 40rpx;
			
			&.color-red {
				color: #ff0000;
			}
		}
		
		.input-box {
			margin-bottom: 80rpx;
			
			.input-item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1px solid #ebebeb;
				
				&:first-of-type {
					margin-bottom: 20rpx;
				}
				
				.tag-name {
					flex-shrink: 0;
					width: 120rpx;
				}
				
				.code-btn {
					padding: 10rpx 16rpx;
					background-color: #ebebeb;
					border-radius: 10rpx;
				}
			}
		}
		
		.btn {
			box-shadow: 0 2rpx 8rpx #195ED7;
		}
		
		.wx-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 200rpx;
			
			view {
				&:first-of-type {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
					
					image {
						max-width: 100%;
						height: 80rpx;
					}
				}
			}
		}
	}
}
</style>
